<template>
	<view class="pages-equity-home-index">
		<view class="nav" style="background-image: url('/static/images/equity-bg.png');">
			<view>
				<view class="top">
					<view class="top--left" @click="businessDistrictSelect.show = !businessDistrictSelect.show">
						<view class="icon location">
							<u-image src="/static/images/icon-location.png" mode="aspectFit" width="36"
								height="36"></u-image>
						</view>
						<view class="business-district-select">{{ businessDistrictSelect.selected.name }}</view>
						<view class="icon arrow">
							<u-image :style="`${businessDistrictSelect.show ? 'transform:rotate(180deg);' : ''}`"
								src="/static/images/icon-arrow.png" mode="aspectFit" width="36" height="36"></u-image>
						</view>
					</view>
					<view class="top--right">
						<u--input placeholder="搜索店铺" prefixIcon="/static/images/icon-search.png"
							prefixIconStyle="font-size: 28rpx;color: #8E8E93;" shape="circle"
							customStyle="background-color:#ffffff;"></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box banner-box">
				<u-swiper :list="['/static/images/equity-banner.png']" indicator indicatorMode="line"
					height="380"></u-swiper>
			</view>
			<view class="box entry-box">
				<view class="entry-box--img">
					<u-image :showLoading="true" src="/static/images/equity-entry-notice.png" mode="aspectFit"
						width="350" height="156"
						@click="handleToPage('/pages/equity-sub/notice/detail', { equity_config_id: equity_config_info.id, notice_id: notice_info.id })"></u-image>
				</view>
				<view class="entry-box--img">
					<u-image :showLoading="true" src="/static/images/equity-entry-feedback.png" mode="aspectFit"
						width="350" height="156"
						@click="handleToPage('/pages/equity-sub/message/send', { equity_config_id: equity_config_info.id, message_type: 'feedback' })"></u-image>
				</view>
			</view>
			<view class="box ad-box">
				<u-image :showLoading="true" src="/static/images/equity-ad.png" mode="aspectFit" width="710" height="80"
					@click=""></u-image>
			</view>
			<view class="box list">
				<u-skeleton v-for="i of 4" :key="i" :loading="true" avatar rows="3"></u-skeleton>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				equity_config_info: {
					id: 0,
				},
				notice_info: {
					id: 0,
				},
				businessDistrictSelect: {
					selected: {
						id: 1,
						name: '湖南女子大学'
					},
					options: [],
					show: false
				}
			}
		},
		onLoad(options) {
			// scene=3-0-1
			const scene = String(options.scene || '')
			if (scene && scene.length) {
				const sceneArr = String(scene).split('-')
				this.equity_config_info.id = sceneArr[2] || 0
				this.notice_info.id = 1 // TODO
			}
		},
		methods: {
			handleToPage(path, params = {}) {
				uni.$u.route({
					url: path,
					params: params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-equity-home-index {
		background-color: #f8f8f8;

		.box {
			margin-bottom: 10rpx;
		}

		.nav {
			padding: 0 54rpx;

			.top {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				background-position: center center;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				&--left {
					display: flex;
					align-items: center;
					width: 296rpx;

					.business-district-select {
						box-sizing: border-box;
						padding: 0 10rpx;
					}
				}

				&--right {
					flex-grow: 1;
				}
			}
		}

		.content {
			margin: 10rpx 20rpx;

			.entry-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&--img {
					flex: 1;
					padding: 0;
					margin: 0;

					::v-deep .u-image__image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.list {
				margin: 0 20rpx;
			}
		}
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
